<template>
  <div id="equEdit">
    <h1>修改装备</h1>
    <el-form
      style="width: 1140px"
      :model="ruleForm"
      :inline="true"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
      label-position="left"
      :hide-required-asterisk="false"
    >
      <el-form-item label="装备编号" prop="id">
        <el-input
          v-model="ruleForm.id"
          disabled
          style="width: 350px"
          placeholder="请输入装备编号"
        ></el-input>
      </el-form-item>
      <el-form-item label="分类" prop="equipmentClassId">
        <el-select
          v-model="ruleForm.equipmentClassId"
          placeholder="请选择装备分类"
          style="width: 350px"
        >
          <el-option
            v-for="v in equipmentClasses"
            :label="v.equipmentClassName"
            :value="v.id"
            :key="v.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="装备名称" prop="equipmentNameId">
        <el-select
          v-model="ruleForm.equipmentNameId"
          placeholder="请选择装备名称"
          style="width: 350px"
        >
          <el-option
            v-for="v in equipmentNames"
            :label="v.equipName"
            :value="v.id"
            :key="v.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="装备状态" prop="state">
        <el-radio-group v-model="ruleForm.state" style="width: 350px">
          <el-button plain
            ><el-radio :label="0">正常</el-radio
          ></el-button>
          <el-button plain
            ><el-radio :label="1">维修中</el-radio
          ></el-button>
          <el-button plain
            ><el-radio :label="2">停用</el-radio
          ></el-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="价格" prop="price">
        <el-input
          v-model="ruleForm.price"
          style="width: 350px"
          placeholder="请输入装备价格"
        ></el-input>
      </el-form-item>
      <el-form-item label="筹措方式" prop="modalities">
        <el-select
          v-model="ruleForm.modalities"
          placeholder="请选择筹措方式"
          style="width: 350px"
        >
          <el-option label="分配" :value="0"></el-option>
          <el-option label="自购" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="使用单位" prop="useunitsId">
        <el-select
          v-model="ruleForm.useunitsId"
          placeholder="请选择使用单位"
          style="width: 350px"
        >
          <el-option
            v-for="v in useunits"
            :label="v.useunitName"
            :value="v.id"
            :key="v.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="存放位置" prop="storageLocationId">
        <el-select
          v-model="ruleForm.storageLocationId"
          placeholder="请选择存放位置"
          style="width: 350px"
        >
          <el-option
            v-for="v in storageLocations"
            :label="v.storageLocationName"
            :value="v.id"
            :key="v.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="责任人" prop="responsiblePerson">
        <el-input
          v-model="ruleForm.responsiblePerson"
          style="width: 350px"
          placeholder="请输入管理责任人"
        ></el-input>
      </el-form-item>
      <el-form-item style="width: 810px; text-align: center">
        <el-button @click="cancelBtn('ruleForm')"> 取消 </el-button>
        <el-button type="primary" @click="editBtn('ruleForm')">
          修改
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        id: null, //装备编号
        equipmentClassId: '', //装备分类
        equipmentNameId: '', //装备名称
        state: null, //装备状态
        price: "", //价格
        modalities: null, //筹措方式
        useunitsId: '', //使用单位
        storageLocationId: '', //存放位置
        responsiblePerson: "", //责任人
      },
      rules: {
        equipmentClassId: [
          { required: true, message: "请选择装备类型", trigger: "change" },
        ],
        equipmentNameId: [
          { required: true, message: "请选择装备名称", trigger: "change" },
        ],
        state: [
          { required: true, message: "请选择装备状态", trigger: "change" },
        ],
        price: [{ required: true, message: "请输入装备价格", trigger: "blur" }],
        modalities: [
          { required: true, message: "请选择筹措方式", trigger: "change" },
        ],
        useunitsId: [
          { required: true, message: "请选择使用单位", trigger: "change" },
        ],
        storageLocationId: [
          { required: true, message: "请选择存放位置", trigger: "change" },
        ],
        responsiblePerson: [
          { required: true, message: "请输入管理责任人", trigger: "blur" },
        ],
      },
      equipmentClasses: [],
      equipmentNames: [],
      useunits: [],
      storageLocations: [],
      equManEdit:{},
    };
  },
  methods: {
    openEdit:function(){
      if(this.$store.state.yqy.equManEdit){
        this.ruleForm.id=this.$store.state.yqy.equManEdit.id;
        this.ruleForm.equipmentClassId=this.$store.state.yqy.equManEdit.equipmentClass.id;
        this.ruleForm.equipmentNameId=this.$store.state.yqy.equManEdit.equipmentName.id;
        this.ruleForm.state=this.$store.state.yqy.equManEdit.state;
        this.ruleForm.price=this.$store.state.yqy.equManEdit.price;
        this.ruleForm.modalities=this.$store.state.yqy.equManEdit.modalities;
        this.ruleForm.useunitsId=this.$store.state.yqy.equManEdit.useunits.id;
        this.ruleForm.storageLocationId=this.$store.state.yqy.equManEdit.storageLocation.id;
        this.ruleForm.responsiblePerson=this.$store.state.yqy.equManEdit.responsiblePerson;
      }
    },
    editBtn(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.$axios({
            url: "/equipment/update",
            method: "put",
            data: this.ruleForm,
          }).then(({ data }) => {
            if (data.code == 0) {
              this.$message.success("修改成功");
              sessionStorage.removeItem('equManEdit');
              this.$router.replace("/home/Zbgl");
            } else {
              this.$message.error("修改失败");
            }
          });
        } else {
          this.$message.error("请完善修改内容！");
        }
      });
    },
    cancelBtn(form) {
      this.$refs[form].resetFields();
      sessionStorage.removeItem('equManEdit');
      this.$router.replace("/home/Zbgl");
    },
  },
  mounted: function () {
    this.openEdit();
    this.$axios({
      url: "/equipment/preselect",
    }).then(({ data }) => {
      if (data.code == 0) {
        // console.log(data);
        this.equipmentClasses = data.equipmentClasses;
        this.equipmentNames = data.equipmentNames;
        this.useunits = data.useunits;
        this.storageLocations = data.storageLocations;
      } else {
        this.$message.error("获取下拉菜单失败！");
      }
    });
  },
};
</script>

<style scoped lang="less">
#equEdit {
  padding: 30px 30px 30px 30px;
  h1 {
    margin-bottom: 20px;
  }
}
[v-cloak] {
  display: none;
}
</style>